<template>
  <div >
    <div class="often-control-box">
      <template v-for="(item,i) in processSettingsArry">
        <div class="often-control-item" :key="i" @click="handClick(item)">
          <a-icon :type="item.icon" />
          <span>{{item.name}}</span>
        </div>
      </template>
    </div>
    <a href="javascript:;" class="often-set" @click="handleSet">
      <a-icon type="setting" />
    </a>
    <often-process-config ref="opc" @ok="getProcessSettings"></often-process-config>
    <process-apply-modal ref="pam"></process-apply-modal>
    <!-- online表单区域 -->
    <onl-cgform-auto-modal ref="modal" v-if="code" :code="code" />
  </div>
</template>

<script>
import Vue from 'vue'
import { getAction } from '@/api/manage'
import OftenProcessConfig from '@/views/process/components/OftenProcessConfig'
import ProcessApplyModal from '@/views/process/components/ProcessApplyModal'
import OnlCgformAutoModal from '@/views/modules/online/cgformys/auto/OnlCgformAutoModal'
export default {
  name: 'OftenApply',
  components: {
    OftenProcessConfig,
    ProcessApplyModal,
    OnlCgformAutoModal
  },
  data() {
    return {
      processSettings: {},
      processSettingsArry: [],
      url: {
        list: '/activiti/models/listAll',
        getColumns: '/online/cgform/api/getColumns/'
      },
      code: ''
    }
  },
  methods: {
    handleSet() {
      this.$refs.opc.visible = true
    },
    getProcessSettings() { // 获取浏览器缓存流程code
      var key = this.$route.name + ':processSettings'
      this.processSettings = Vue.ls.get(key) || {}
      this.processSettingsArry = this.setProcessSettings()
    },
    setProcessSettings() { // 浏览器缓存只存了流程code 根据code获取流程信息
      var list = []
      let processSettingsArry = []
      Object.keys(this.processSettings).forEach(key => {
        processSettingsArry = processSettingsArry.concat(this.processSettings[key])
      })
      this.processData.forEach((item, i) => {
        if (processSettingsArry.indexOf(item.key) >= 0) {
          list.push(item)
        }
      })
      return list
    },
    loadData() {
      getAction(this.url.list, { isShow: true }).then((res) => { // 查询已有流程
        if (res.success) {
          this.processData = res.result
          this.getProcessSettings()
        } else {
          this.$message.warning(res.message)
        }
      }).catch((error) => {
        console.log(error)
      })
    },
    handClick(item) {
      if (item.formType === '1') {
        this.code = item.tableName
        setTimeout(() => {
          this.getFormTemplate()
        }, 500)
      } else {
        this.$refs.pam.showModel(item)
      }
    },
    getFormTemplate() {
      getAction(`${this.url.getColumns}${this.code}`).then((res) => {
        this.formTemplate = res.result.formTemplate
        this.$refs.modal.add(this.formTemplate)
      })
    }
  },
  created() {
    this.loadData()
  }
}
</script>

<style>
.often-control-box {
  display: grid;
  grid-template-columns: repeat(5, 20%);
  padding: 0px 10px;
}
.often-control-box .often-control-item {
  height: 50px;
  display: flex;
  align-items: center;
  cursor: pointer;
  color: #424e5c;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.often-control-item > i {
  margin-right: 10px;
  font-size: 1.5em;
}
.often-set{
  position: fixed;
  right: 40px;
  top:8px ;
}
</style>
